<template>
  <div class="container">
    <el-dialog
      title="入库参考价"
      :visible.sync="dialog.centerDialogVisible"
      @open="open"
      @close="cancel"
      width="800px"
      center
    >
      <div class="top">
        <el-button
          class="add"
          type="primary"
          size="small"
          icon="el-icon-circle-plus-outline"
          @click="add()"
          >添加入库参考价</el-button
        >
      </div>
      <el-table
        max-height="600"
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="org_name"
          label="区域名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="typeMsg"
          label="类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="reference_price"
          label="价格"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope)"
              >编辑</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <pagination
        @page="handleSizeChange"
        @pagesize="handleCurrentChange"
        :pageData="pageData"
      ></pagination>
      <el-dialog
        append-to-body
        width="500px"
        :title="
          dialogCenter.dialogType === 'edit'
            ? '修改入库参考价'
            : '添加入库参考价'
        "
        :visible.sync="dialogCenter.centerDialogVisible"
        center
        @close="cancels"
      >
        <el-form label-width="150px">
          <el-form-item label="入库参考价：">
            <el-input-number
              :controls="false"
              v-model="form.reference_price"
              controls-position="right"
              :precision="4"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="入库参考类型：">
            <el-select
              v-model="form.type"
              @change="typOhange"
              placeholder="请选择参考类型"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.type" label="区域：">
            <el-select
              v-model="form.code"
              filterable
              remote
              center
              reserve-keyword
              placeholder="请输入区域"
              :remote-method="insideRemoteMethod"
              :loading="insideAreaDialog.loading"
            >
              <el-option
                v-for="item in insideAreaDialog.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancels">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPercentageInfo,
  setPercentageInfo,
  selectAreaList,
  getReferencePriceList,
  selectOrgAreaData,
  selectRdcAreaData,
  setReferencePrice,
} from "@/api/commodity/commodityList";
import Pagination from "@/components/pagination";
// import { getAreaList } from "@/api/permission/adminlist";
export default {
  props: {
    dialog: Object,
  },
  components: {
    pagination: Pagination,
  },
  data() {
    return {
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      dialogCenter: {
        dialogType: "",
        centerDialogVisible: false,
        id: "",
      },
      form: {
        goods_code: "",
        erp_goods_id: "",
        reference_price: 0,
        type: 2,
        code: "",
      },
      typeList: [
        // {
        //   value: 0,
        //   label: "默认按品设置",
        // },
       
        {
          value: 2,
          label: "门店区域",
        },
        {
          value: 1,
          label: "配送中心区域",
        },
      ],
      search: {
        area: "",
      },
      tableData: [],
      // insideArea: {
      //   innerVisible: false,
      //   options: [],
      //   value: "",
      //   list: [],
      //   loading: false,
      // },
      insideAreaDialog: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      },
    };
  },
  created() {},
  methods: {
    //关闭
    cancel() {
      // this.insideArea = {
      //   innerVisible: false,
      //   options: [],
      //   value: "",
      //   list: [],
      //   loading: false,
      // };
      this.search = {
        area: "",
      };
      this.dialog.centerDialogVisible = false;
    },

    // 关闭弹窗
    cancels() {
      this.dialogCenter.centerDialogVisible = false;
      this.form = {
        goods_code: "",
        erp_goods_id: "",
        reference_price: 0,
        type: "",
        code: "",
      };
      this.insideAreaDialog = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      };
    },
    open() {
      this.getData();
      // this.getInsideArea();
    },
    // 获取数据
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        goods_code: this.dialog.code,
      };
      getReferencePriceList(data).then((res) => {
        if (res.code == 0) {
          res.data.data.forEach((item) => {
            switch (item.type) {
              case 0:
                item.typeMsg = "默认按品设置";
                break;
              case 1:
                item.typeMsg = "配送中心区域";
                break;
              case 2:
                item.typeMsg = "门店区域";
                break;
            }
          });
          this.tableData = res.data.data;
          this.pageData.page = res.data.current_page;
          this.pageData.pagesize = res.data.per_page;
          this.pageData.total = res.data.total;
        }
      });
    },
    //选择类型
    typOhange(val) {
      this.insideAreaDialog = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      };
      this.form.code = "";
      if (val) {
        this.getInsideAreas();
      }
    },
    // getInsideArea(query = "") {
    //   let data = {
    //     page: 1,
    //     limit: 50,
    //     key: query,
    //   };
    //   //获取初始化区域列表
    //   selectAreaList(data).then((res) => {
    //     this.insideArea.options = res.data.map((item) => {
    //       return {
    //         value: `${item.area_code}`,
    //         label: `${item.area_name}(${item.area_code})`,
    //       };
    //     });
    //   });
    // },
    getInsideAreas(query = "") {
      let data = {
        page: 1,
        limit: 50,
        key: query,
      };
      if (this.form.type == 1) {
        //获取初始化区域列表
        selectRdcAreaData(data).then((res) => {
          this.insideAreaDialog.options = res.data.list.map((item) => {
            return { value: `${item.area_code}`, label: `${item.area_name}` };
          });
        });
      } else if (this.form.type == 2) {
        //获取初始化区域列表
        selectOrgAreaData(data).then((res) => {
          this.insideAreaDialog.options = res.data.list.map((item) => {
            return { value: `${item.area_code}`, label: `${item.area_name}` };
          });
        });
      }
    },
    // 搜索区域
    // insideRemoteMethods(query) {
    //   if (query !== "") {
    //     this.getInsideArea(query);
    //   } else {
    //     this.insideArea.options = [];
    //   }
    // },
    // 搜索弹窗区域
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getInsideAreas(query);
      } else {
        this.insideAreaDialog.options = [];
      }
    },

    // areaItem(code) {
    //   let insidearr = this.insideAreaDialog.options.filter((res) => {
    //     return res.value == code;
    //   });
    //   this.form.area_name = insidearr[0].label;
    //   console.log(this.form.area_name);
    // },
    //添加
    add() {
      this.dialogCenter = {
        dialogType: "",
        centerDialogVisible: true,
        id: "",
      };
      this.getInsideAreas();
    },
    // 编辑
    handleEdit(scope) {
      this.dialogCenter = {
        dialogType: "edit",
        centerDialogVisible: true,
        id: scope.row.id,
      };
      this.form = {
        goods_code: scope.row.erp_goods_code,
        erp_goods_id: scope.row.erp_goods_id,
        type: scope.row.type,
        percentage: scope.row.percentage,
        area_code: scope.row.area_code,
        area_name: scope.row.area_name,
        id: scope.row.id,
        fixed_price: scope.row.fixed_price,
        m_type: scope.row.m_type,
        markup: scope.row.markup,
      };
      this.getInsideAreas();
    },
    //确定
    confirm() {
      if (this.form.type && !this.form.code) {
        this.$message({
          type: "info",
          message: "请选择区域",
        });
      } else {
        let data = {
          goods_code: this.dialog.code,
          erp_goods_id: this.dialog.id,
          reference_price: this.form.reference_price,
          type: this.form.type,
          code: this.form.code,
        };
        if (this.dialogCenter.dialogType == "edit") {
          data.id = this.form.id;
          setPercentageInfo(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
              this.getData();
              this.cancels();
            }
          });
        } else {
          setReferencePrice(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
              this.getData();
              this.cancels();
            }
          });
        }
      }
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;

      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;

      this.getData();
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
.top {
  height: 50px;
  width: 100%;
  position: relative;
}
.add {
  position: absolute;
  right: 0;
  top: 5px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
</style>